<template>
  <div class="homepage">
    <ul class="nav-list">
      <li>华为专区</li>
      <li>HarmonyOS</li>
      <li>耳机</li>
      <li>美食酒饮</li>
      <li>手表</li>
      <li>手机</li>
      <li>手环</li>
      <li>电脑</li>
      <li>平板</li>
      <li>智慧屏</li>
      <li>家用电器</li>
      <li>路由器</li>
    </ul>
    <ul class="nav-banner">
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202203/C295826FE1F075F2E54355CD64DA4414.jpg"
          alt
        />
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202204/F5AB7AFB4569150BFEECF06FD16D82B9.png"
          alt
        />
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202203/E9BBA90C7E1341AE4A2746308E58B68A.jpg"
          alt
        />
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202203/D80281FCDE042CFAA59CED2046B3603E.png"
          alt
        />
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202204/FD65B3CB0441A992A9BEA5DA9F92C6EC.jpg"
          alt
        />
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202203/AF21D79963A02D90F10A587A69F1D1D6.jpg"
          alt
        />
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202203/3C1BEEEB7DD01478CAF810CC9BBA36E6.jpg"
          alt
        />
      </li>
    </ul>
    <ul class="nav-shopList">
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>智慧办公</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>智能家居</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>影音娱乐</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>运动健康</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>AITO汽车</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>众测</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>鸿蒙智联</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>华为手机</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>华为智选</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>超新计划</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>企业团购</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>直播</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>莫塞尔</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>拼团</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>个护健康</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>领卷中心</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>教育商店</p>
      </li>
      <li>
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202201/D28270EC6F90EE2276E0D32E13627CC1.png.75.webp"
          alt
        />
        <p>二手机</p>
      </li>
    </ul>
    <div class="time-buy">
      <div class="time-buywrapper">
        <div class="time-buyTitle">
          <div class="xianshi">
            <h2>限时购</h2>
            <p>好货限时抢</p>
          </div>
          <div class="miaosha">
            <h2>秒杀</h2>
            <p>
              距结束
              <span class="hour">05</span>
              <i>:</i>
              <span class="minute">45</span>
              <i>:</i>
              <span class="second">41</span>
            </p>
          </div>
        </div>
        <ul class="time-buyList">
          <li>
            <img
              src="https://res.vmallres.com/pimages//product/6941487227631/428_428_7A9C64F5992008436220F98539AF44BB2330BF4B9D07430Bmp.png"
              alt
            />
            <p class="price">
              <span class="nowprice">￥2599</span>
              <del>￥2800</del>
            </p>
          </li>
          <li>
            <img
              src="https://res.vmallres.com/pimages//product/6941487236541/428_428_FEFF272C0ACD787A29C40D83FB75F09F6A6F5303F3C06654mp.png"
              alt
            />
            <p class="price">
              <span class="nowprice">￥3699</span>
              <del>￥3800</del>
            </p>
          </li>
          <li>
            <img
              src="https://res.vmallres.com/pimages//product/GB3102150039901/428_428_1540952549939mp.png"
              alt
            />
            <p class="price">
              <span class="nowprice">￥179</span>
              <del>￥169</del>
            </p>
          </li>
          <li>
            <img
              src="https://res.vmallres.com/pimages//product/6941408852003/428_428_2B0D6A07AFA2CE5EAF8C27B090B511901C38EBDA726C7A6Dmp.png"
              alt
            />
            <p class="price">
              <span class="nowprice">￥169</span>
              <del>￥170</del>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="newpeople">
      <div class="newpeople-wrapper">
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202203/5F4F58E3F7BAA2E327DE461EEA21FA0F.gif"
          alt
        />
      </div>
    </div>
    <div class="qijian">
      <div class="qijianTitle">
        <img
          src="https://res.vmallres.com/uomcdn/CN/cms/202104/89A5EF9383442D7E0D9BA1EF8E95EA9B.png"
          alt
        />
      </div>
      <div class="qijianMain">
        <ul class="qijianLeft">
          <li>
            <img
              src="https://res.vmallres.com/uomcdn/CN/cms/202203/3CCC0F78E424FD61368BE1D6A1DE6F09.jpg.75.webp"
              alt
            />
          </li>
          <li>
            <img
              src="https://res.vmallres.com/uomcdn/CN/cms/202203/A2510F668BDA8F865EF41952A7AEE843.png.75.webp"
              alt
            />
          </li>
        </ul>
        <ul class="qijianRight">
          <li>
            <img
              src="https://res.vmallres.com/uomcdn/CN/cms/202203/372A852D107653D81BC8572D42732596.png.75.webp"
              alt
            />
          </li>
          <li>
            <img
              src="https://res.vmallres.com/uomcdn/CN/cms/202203/A890834A4C85FFA4EFD734160A9E9C96.jpg.75.webp"
              alt
            />
          </li>
          <li>
            <img
              src="https://res.vmallres.com/uomcdn/CN/cms/202202/B9C5A41FF53F3F68BB5908704FA44F96.jpg.75.webp"
              alt
            />
          </li>
          <li>
            <img
              src="https://res.vmallres.com/uomcdn/CN/cms/202204/8F17589EDAA51AC804E7E6523803B898.jpg.75.webp"
              alt
            />
          </li>
          <li>
            <img
              src="https://res.vmallres.com/uomcdn/CN/cms/202204/03A8DC0FC0C482D392D103EEE25DA201.jpg.75.webp"
              alt
            />
          </li>
        </ul>
      </div>
    </div>
    <div class="shop-wrapper">
      <ul class="shop-list">
        <li v-for="item in shopList" :key="item.id">
          <img :src="item.imgsrc" alt />
          <p class="title">
            <span>{{item.titleText}}</span>
            {{item.title}}
          </p>
          <p class="price">{{item.price}}</p>
          <p class="info">
            <span>{{item.info}}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import instance from "@/api/index"
export default {
    name:"HomePage",
    data(){
        return {
            shopList:null
        }
    },
    methods:{
        async getHomePage(){
            let {data} = await instance.get("/homepage")
            this.shopList = data.shopList
        }
    },
    created(){
        this.getHomePage();
    }
}
</script>

<style scoped>
/* 导航条 */
.nav-list {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding-left: 24px;
  overflow: scroll;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::-webkit-scrollbar {
  display: none;
}
.nav-list li {
  height: 28px;
  padding: 0 8px;
  color: #000;
  font-size: 12px;
  margin-right: 12px;
  white-space: nowrap;
  background: #e5e7e8;
  border-radius: 14px;
  display: flex;
  align-items: center;
}

/* 导航广告 */
.nav-banner {
  box-sizing: border-box;
  width: 100%;
  height: 97px;
  padding-left: 24px;
  overflow: scroll;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-banner li {
  margin-right: 15px;
}
.nav-banner li img {
  width: 189px;
  height: 81px;
  border-radius: 16px;
}

/* 商品导航 */
.nav-shopList {
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  overflow: scroll;
  padding: 10px 24px 0 24px;
  display: flex;
}
.nav-shopList li {
  padding: 0 12px;
  font-size: 12px;
  color: #000;
  margin-right: 10px;
}
.nav-shopList li img {
  width: 48px;
}
.nav-shopList li p {
  white-space: nowrap;
  text-align: center;
}

/* 限时购 */
.time-buy {
  box-sizing: border-box;
  width: 100%;
  padding: 0 24px;
}
.time-buywrapper {
  box-sizing: border-box;
  height: 226px;
  background: #fff;
  border-radius: 15px;
  padding: 0 12px;
}
.time-buyTitle {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.time-buyTitle div {
  width: 280px;
  height: 100%;
  display: flex;
  align-items: center;
}
.time-buyTitle div h2 {
  font-size: 16px;
}
.time-buyTitle div p {
  font-size: 12px;
  margin-left: 5px;
}
.time-buyTitle .xianshi p {
  padding: 0 4px;
  background: #ed6f211a;
}
.time-buyTitle .miaosha span {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  padding: 0 1px;
  border-radius: 2px;
  font-size: 12px;
  color: #fff;
  background: #cf0a2c;
}
.time-buyTitle .miaosha i {
  color: red;
  margin: 0 5px;
}
.time-buyList {
  width: 100%;
  height: calc(226px - 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.time-buyList li {
  width: 136px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.time-buyList li img {
  width: 120px;
}
.time-buyList li p {
  width: 100%;
  font-size: 12px;
  text-align: center;
}
.time-buyList li p span {
  display: block;
  color: #cf0a2c;
  font-weight: 600;
}
.time-buyList li p del {
  color: gray;
}

/* 新人有礼 */
.newpeople {
  box-sizing: border-box;
  width: 100%;
  padding: 0 24px;
}
.newpeople-wrapper {
  padding: 10px 0;
}
.newpeople-wrapper img {
  width: 100%;
  border-radius: 15px;
}

/* 旗舰新品 */
.qijian {
  box-sizing: border-box;
  width: 100%;
  padding: 0 24px;
}
.qijianTitle {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.qijianTitle img {
  height: 24px;
}
.qijianMain {
  box-sizing: border-box;
  width: 100%;
  /* padding: 0 24px; */
  display: flex;
  justify-content: space-between;
}
.qijianMain li img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.qijianLeft {
  width: 192px;
  display: flex;
  flex-wrap: wrap;
}
.qijianLeft li {
  width: 100%;
  height: 140px;
}
.qijianLeft li:first-child {
  height: 287px;
}

.qijianRight {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}
.qijianRight li {
  box-sizing: border-box;
  width: 192px;
  height: 140px;
  margin: 0 0 8px 8px;
}

/* 商品列表 */
.shop-list {
  box-sizing: border-box;
  width: 100%;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.shop-list li {
  box-sizing: border-box;
  width: 49.2%;
  height: 427px;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 8px;
}
.shop-list li img {
  width: 244px;
  height: 244px;
  margin: 24px auto;
}
.shop-list li p {
  padding-left: 15px;
}
.shop-list li .title {
  display: flex;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 30px;
}
.shop-list li .title span {
  display: inline-block;
  width: 48px;
  height: 15px;
  padding: 0 4px;
  margin-right: 4px;
  background: #cf0a2c;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  border-radius: 5px;
  align-self: center;
  display: flex;
  align-items: center;
}

.shop-list li .price {
  color: #cf0a2c;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.shop-list li .info span {
  width: 48px;
  height: 14px;
  padding: 0 4px;
  font-size: 12px;
  color: #cf0a2c;
  border: 1px solid rgba(207, 10, 44, 0.4);
  border-radius: 5px;
}
</style>